<template>
    <el-slider v-model="size" />
    <el-space wrap :size="size">
        <el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
            <template #header>
                <div class="card-header">
                    <span>Card name</span>
                    <el-button class="button" text>Operation button</el-button>
                </div>
            </template>
            <div v-for="o in 4" :key="o" class="text item">
                {{ 'List item ' + o }}
            </div>
        </el-card>
    </el-space>


    <h1>API</h1>
  <el-row class="mb-4">
    <b>属性</b>
    <table width="100%">
        <tr>
          <th width="15%">属性名</th>
          <th>说明</th>
          <th width="15%">类型</th>
          <th width="15%">默认值</th>
        </tr>
        <tr v-for="item in attrs">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
          <td>{{item.type}}</td>
          <td>{{item.defaultValue}}</td>
        </tr>
      </table>
      <b>Slots</b>
    <table width="100%">
      <tr>
          <th width="30%">名称</th>
          <th>说明</th>
      </tr>
      <tr v-for="item in slots">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
      </tr>
    </table>
  </el-row>


</template>
<script>
export default {
    data(){
        return{
            size: 20,
            attrs:[{
              "name":"alignment",
              "desc":"对齐的方式",
              "type":"枚举[stretch|center|start|end]",
              "defaultValue":"center"
            },{
              "name":"class",
              "desc":"类名",
              "type":"string/object/array",
              "defaultValue":"default"
            },{
              "name":"direction",
              "desc":"排列的方向",
              "type":"枚举[vertical|horizontal]",
              "defaultValue":"horizontal"
            },{
              "name":"prefix-cls",
              "desc":"给space-item的类名前缀",
              "type":"string",
              "defaultValue":"-"
            },{
              "name":"style",
              "desc":"额外样式",
              "type":"string/object",
              "defaultValue":"-"
            },{
              "name":"spacer",
              "desc":"间隔符",
              "type":"string/number/VNode",
              "defaultValue":"-"
            },{
              "name":"size",
              "desc":"间隔大小",
              "type":"枚举/number/array",
              "defaultValue":"small"
            },{
              "name":"wrap",
              "desc":"设置是否自动折行",
              "type":"boolean",
              "defaultValue":"false"
            },{
              "name":"fill",
              "desc":"子元素是否填充父容器",
              "type":"boolean",
              "defaultValue":"false"
            },{
              "name":"fill-ratio",
              "desc":"填充父容器比例",
              "type":"number",
              "defaultValue":"100"
            }],
            slots:[{
              "name":"default",
              "desc":"需要添加间隔的元素"
            }]
        }
    }
}
</script>
